<template>
    <a-layout class="layout-demo">
        <a-layout-sider
                theme="dark"
                breakpoint="lg"
                :width="220"
                collapsible
        >
            <div class="logo" >
                <a-avatar>
                    <img
                        alt="avatar"
                        :src=businessInfo.businessImg
                    />
                </a-avatar>
            </div>
            <a-menu
                    :defaultOpenKeys="['1']"
                    :defaultSelectedKeys="['foods']"
                    @menuItemClick="onClickMenuItem"
            >
                <a-menu-item key="foods" >
                    <IconHome />
                    商品管理
                </a-menu-item>
                <a-menu-item key="orders" >
                    <IconCalendar />
                    订单管理
                </a-menu-item>
                <a-menu-item key="datas" >
                    <IconCalendar />
                    数据分析
                </a-menu-item>
            </a-menu>
        </a-layout-sider>
        <a-layout>
            <a-layout-header>
                <p style="text-align: right;margin-right: 10%">管理员</p>
            </a-layout-header>
            <a-layout style="padding: 0 24px">
                <a-layout-content>
                    <router-view :id="businessInfo.id" />
                </a-layout-content>
                <a-layout-footer>ELEME_ADMIN</a-layout-footer>
            </a-layout>
        </a-layout>
    </a-layout>
</template>

<script setup lang="ts">
import {defineComponent, onMounted, ref, watch} from 'vue';
import { Message } from '@arco-design/web-vue';
import {
    IconHome,
    IconCalendar,
} from '@arco-design/web-vue/es/icon';
import router from "../router";
import {useRoute} from "vue-router";
import {BusinessVO} from "../type/business";
import {getBusinessAPI} from "../service/business.ts";
const route = useRoute()

const businessInfo = ref<BusinessVO>({
    businessAddress: "",
    businessExplain: "",
    businessImg: "",
    businessName: "",
    businessWeight: 0,
    createTime: 0,
    deliveryPrice: 0,
    id: 0,
    quantity: 0,
    starPrice: 0,
    tags: []
})

onMounted(async ()=>{
    //请求数据
    Message.loading
    const res = await getBusinessAPI(route.params.id as number)
    businessInfo.value = res.data
})

const selectKey = ref('foods');
const onClickMenuItem =(key) =>{
    selectKey.value = key;
}

watch(selectKey, (newValue, oldValue) =>{
    router.push({path:`/analyse/businessInfo/${route.params.id}/`+newValue})
},{immediate:true})

</script>

<style scoped>
.layout-demo {
    width: 100vw;
    height: 100vh;
    background: var(--color-fill-2);
    border: 1px solid var(--color-border);
}
.layout-demo :deep(.arco-layout-sider) .logo {
    height: auto;
    margin: 12px 8px;
    background: rgba(255, 255, 255, 0.2);
}
.layout-demo :deep(.arco-layout-sider-light) .logo{
    background: var(--color-fill-2);
}
.layout-demo :deep(.arco-layout-header)  {
    height: 64px;
    line-height: 64px;
    background: var(--color-bg-3);
}
.layout-demo :deep(.arco-layout-footer) {
    height: 48px;
    color: var(--color-text-2);
    font-weight: 400;
    font-size: 14px;
    line-height: 48px;
}
.layout-demo :deep(.arco-layout-content) {
    color: var(--color-text-2);
    font-weight: 400;
    font-size: 14px;
    background: var(--color-bg-3);
}
.layout-demo :deep(.arco-layout-footer),
/*.layout-demo :deep(.arco-layout-content)  {*/
/*    display: flex;*/
/*    flex-direction: column;*/
/*    justify-content: center;*/
/*    color: var(--color-white);*/
/*    font-size: 16px;*/
/*    font-stretch: condensed;*/
/*    text-align: center;*/
/*}*/
</style>
